<template>
	<view class="wxshake">
		<hy-nav-bar title="摇一摇"  :background="{
			backgroundColor:'rgba(0,0,0,0)'
		}" :border-bottom="false" :titleColor="'#ffffff'" backIconColor="#fff"></hy-nav-bar>
		<!-- <watermark></watermark> -->
		<view class="wxshake-box">
			<image class="wxshake-img" :src="shakeImg1" mode="aspectFill"></image>
			<view class="wxshake-open-box" :class="{ 'wxshake-open': show }">
				<image class="wxshake-open-img" :src="shakeImg3" mode="aspectFill"></image>
				<text class="wxshake-open-text">正在搜寻统一时刻摇晃手机的人</text>
			</view>
			<image class="wxshake-img" :src="shakeImg2" mode="aspectFill"></image>
		</view>
		<view class="wxshake-card" v-if="showCard" @click="addfriend(detail)">
			<view class="person-wx-user">
				<image class="person-wx-avatar"  :src="detail.portrait"
					mode="aspectFill"></image>
				<view class="person-wx-user-detail">
					<view class="person-wx-nikename">
						<text class="text">{{ detail.nickName }}</text>
						<view class="wxfont person-wx-nikename-icon" :class="{ 'nv': detail.gender == '0' }"
							v-if="detail.gender == '0'"></view>
						<view class="wxfont person-wx-nikename-icon" :class="{ 'nan': detail.gender == '1' }"
							v-if="detail.gender == '1'"></view>
					</view>
					<text class="person-wx-name">
						相距{{ detail.distance }}{{ detail.distanceUnit }}
					</text>
				</view>
				<uni-icons class="xw-tool-right" type="right" size="18" color="#b5b5b5"></uni-icons>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import  shakeImg1 from '../../static/img/y01.png' 
import  shakeImg2 from '../../static/img/y02.png' 
import  shakeImg3 from '../../static/img/y03.png' 

const show = ref(false)
const isOpened = ref(false)
const showCard = ref(false)
const detail = ref('')
const music = ref()
const initAudio = () => {
	music.value = uni.createInnerAudioContext();
	music.value.src = '../../static/shake.wav';
	uni.startAccelerometer();
	uni.onAccelerometerChange((res) => {
		if (show.value) {
			return
		}
		if (Math.abs(res.x) + Math.abs(res.y) + Math.abs(res.z) > 20 && !show.value && isOpened.value) {
			music.value.play();
			showCard.value = false;
			show.value = true;
			uni.getLocation({
				type: 'wgs84',
				success: (resLocation) => {
					console.log(resLocation)
				},
				fail: (error) => {
					uni.showToast({
						title: '请检查定位是否开启',
						icon: 'none',
						position: 'bottom'
					})
					console.log(error.errMsg)
				},
				complete: (res) => {
					setTimeout(() => {
						show.value = false;
					}, 300)
				}
			});
		}
	})
}
const addfriend = (detail)=>{
	console.log(detail)
}
onShow(() => {
	isOpened.value = true;
})
onLoad(()=>{
	initAudio();
})
onUnload(() => {
	show.value = false;
	isOpened.value = false;
	uni.stopAccelerometer();
	music.value.destroy();
})

</script>

<style lang="scss" scoped>
.wxshake {
	background-color: #212121;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-wrap: wrap;
}

.wxshake-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.wxshake-img {
	width: 200rpx;
	height: 100rpx;
}

.wxshake-open-box {
	box-sizing: border-box;
	height: 0;
	overflow: hidden;
	transition: all 0.3s linear;
	width: 750rpx;
	background-color: #2F2F2F;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.wxshake-open {
	height: 360rpx;
}

.wxshake-open-img {
	width: 150rpx;
	height: 150rpx;
}

.wxshake-open-text {
	font-size: 26rpx;
	color: #A6A6A6;
}

.wxshake-card {
	margin: 0 50rpx;
	margin-top: 200rpx;
	padding: 24rpx;
	background-color: #4C4C4C;
	border-radius: 12rpx;
}

.person-wx-user {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.person-wx-avatar {
	width: 120rpx;
	min-width: 120rpx;
	height: 120rpx;
	margin-right: 42rpx;
	border-radius: 16rpx;
}

.person-wx-user-detail {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 400rpx;
}

.person-wx-nikename {
	color: #e7e7e7;
	font-size: 36rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.person-wx-nikename .text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 480rpx;
}

.person-wx-name {
	color: #B2B2B2;
	font-size: 28rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.person-wx-nikename-icon.nan {
	color: #007AFF;
}

.person-wx-nikename-icon.nv {
	color: #FF5A5F;
}

.person-wx-nikename-icon {
	margin-right: auto;
}</style>
